<template>
    <div class="main">
        <div class="fixed-section">
            <div class="head-bar">
                <div class="left-arrow" @click="onClickLeft"></div>
                <span>{{$t('m.Routeresult')}}</span>
            </div>
            <div class="search-area">
                <div class="circle">
                    <div class="outer-circle-green">
                        <div class="inner-circle"></div>
                    </div>
                    <div class="gray"></div>
                    <div class="gray"></div>
                    <div class="gray"></div>
                    <div class="gray"></div>
                    <div class="outer-circle-red">
                        <div class="inner-circle"></div>
                    </div>

                </div>
                <div class="search-bar-area">
                    <div class="start-stop"
                         :style="{'transform':`translateY(${startPosition})`,'transition-duration':'0.5s'}">
                        {{unicodeTozawgyi(startStop)}}
                    </div>
                    <div class="line"></div>
                    <div class="end-stop"
                         :style="{'transform':`translateY(${endPosition})`,'transition-duration':'0.5s'}">{{unicodeTozawgyi(endStop)}}
                    </div>
                </div>
                <div class="exchange-button" @click="stopChange">
                    <img src="../../static/img/exchange.png" alt=""
                         :style="{
                     'width':'30px',
                     'height':'30px',
                     'transform':`rotate(${rotateDeg})`,
                     'transition-duration':'0.5s'}">
                </div>
            </div>
        </div>
        <div class="result-outer-wraper">
            <div class="mask" v-if="loading">
                <img src="../../static/img/loading.gif" style="height:150px;">
            </div>
            <div class="result-wraper" v-for="(item,index) in listData" :key="index" @click="toLineDetail(index);">
                <p class="route-head">
                    <span class="stop-disc">{{item.stops}} stops/{{item.distance|formateDistance}}</span>
                    <span class="time">{{item.time|formateTime}}</span>
                </p>
                <div v-for="(itm,ind) in item.detailData" :key="ind" class="detail-data">
                    <div class="numberBox" :style="{backgroundColor:itm.color}" v-if="itm.lineNum!=9693">
                        {{itm.lineNum}}
                    </div>
                    <img v-else src="../../static/img/walk.png" class="walk-logo"/>
                    <span class="desc">{{itm.desc}}</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import {searchLineByStop} from '../../static/api/gc_api'
    import axios from 'axios'
    import {base} from '../../static/api/zxy_api'

    export default {
        data() {
            return {
                listData: [],
                startId: '',
                endId: '',
                startStop: '',
                endStop: '',
                // 下面是用来控制搜索栏上下移动的
                startMove: false,
                startPosition: '0',
                endMove: false,
                endPosition: '0',
                ifRotate: false,
                rotateDeg: '0',
                loading: true,
                currentLang: 'MM'
            }
        },
        methods: {
            //unicode转交集
            unicodeTozawgyi(value){
                if(value){
                    return this.$translateLang(value,'unicodeTozawgyi')||''
                }else{
                    return value;
                }
            },
            stopChange() {
                //控制起始栏上下移动
                if (this.startMove) {
                    this.startPosition = 0
                }
                else {
                    this.startPosition = '100%'
                }
                this.startMove = !this.startMove
                // 控制终点栏上下移动
                if (this.endMove) {
                    this.endPosition = 0
                }
                else {
                    this.endPosition = '-100%'
                }
                this.endMove = !this.endMove
                //控制exchange按钮旋转
                if (this.ifRotate) {
                    this.rotateDeg = '0'
                }
                else {
                    this.rotateDeg = '180deg'
                }
                this.ifRotate = !this.ifRotate
                //交换起始站和终点站的id，重新获取结果
                //数据重置
                this.listData = []
                this.loading = true
                let tempId = this.startId
                this.startId = this.endId
                this.endId = tempId
                this.getResult()
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            toLineDetail(index) {
                this.$router.push({
                    path: '/map-details/stopid-line-detail',
                    query: {
                        startStopId: this.startId,
                        endStopId: this.endId,
                        linesIndex: index
                    }
                })

            },
            getResult() {
                if (this.startId && this.endId) {
                    axios.get(`${base}/app/bus-line/${this.startId}/${this.endId}`)
                        .then(res => {
                            // console.dir(res)
                            this.loading = false
                            if (res.data.length > 0) {
                                //初始化加载页面时从第一条数据里拿到起始站和终点站
                                //如果已经初始化过了 就不要改变startStop和endStop的值了
                                // if(!this.startStop&&!this.endStop){
                                //     this.startStop=res.data[0].lineNames[0].stopNameEn
                                //     this.endStop=res.data[0].lineNames[res.data[0].lineNames.length-1].stopNameEn
                                // }
                                let finalData = []
                                for (let i = 0; i < res.data.length; i++) {
                                    let eachObj = {}
                                    //第一行的信息拿到了
                                    eachObj.time = res.data[i].time
                                    eachObj.stops = res.data[i].stops
                                    eachObj.distance = res.data[i].distance
                                    //下面拿路线的详情信息
                                    eachObj.detailData = []
                                    let subData = res.data[i]
                                    for (let j = 0; j < subData.lines.length; j++) {
                                        let tempObj = {}
                                        tempObj.lineNum = subData.lines[j]
                                        tempObj.color = subData.colors[j]
                                        if (tempObj.lineNum != 9693) {
                                            if (this.currentLang == 'US') {
                                                tempObj.desc = 'Take bus' + '\"' + '' + tempObj.lineNum + '\"' + 'from' + '\"'
                                                    + subData.lineNames[j].stopNameEn + '\"' + 'to' + '\"' + subData.lineNames[j + 1].stopNameEn
                                                    + '\"' + '.'
                                            }
                                            else {
                                                tempObj.desc = 'ဘက္စ္' + '\"' + '' + this.unicodeTozawgyi(tempObj.lineNum) + '\"' + 'ကို' + '\"'
                                                    + this.unicodeTozawgyi(subData.lineNames[j].stopNameMm) + '\"' + 'မွ' + '\"' + this.unicodeTozawgyi(subData.lineNames[j + 1].stopNameMm)
                                                    + '\"' + '.'
                                            }
                                        }
                                        else {
                                            if (this.currentLang == 'US') {
                                                tempObj.desc = 'Walk to' + '\"' + subData.lineNames[j + 1].stopNameEn + '\"' + 'bus stop.'
                                            }
                                            else {
                                                tempObj.desc = 'ထိစီးပါ။' + '\"' + this.unicodeTozawgyi(subData.lineNames[j + 1].stopNameMm) + '\"' + 'မွတ္တိုင္ သို႕ သြားပါ။.'
                                            }
                                        }
                                        eachObj.detailData.push(tempObj)
                                    }
                                    finalData.push(eachObj)
                                }
                                // console.dir(finalData)
                                this.listData = finalData
                            }
                        })
                        .catch(err => {
                            this.loading = false
                            console.log(err)
                        })
                }
            },
        },
        filters: {
            formateTime(time) {
                if (time && time >= 0) {
                    //向上取整
                    let min = Math.ceil(time)
                    if (0 <= min && min < 60) {
                        return min + 'min'
                    }
                    else if (60 <= min && min < 1440) {
                        let h = Math.floor(min / 60)
                        let m = min - 60 * h
                        if (m == 0) {
                            return h + 'h'
                        }
                        else {
                            return h + 'h' + m + 'min'
                        }
                    }
                    else if (1440 <= min && min < 43200) {
                        let d = Math.floor(min / (24 * 60))
                        let h = Math.floor((min - d * 24 * 60) / 60)
                        let m = min - d * 24 * 60 - h * 60
                        if(h==0&&m==0){
                            return d+'d'
                        }
                        else if(h!=0&&m==0){
                            return d+'d'+h+'h'
                        }
                        else if(h==0&&m!=0){
                            return d+'d'+m+'m'
                        }
                        else if(h!=0&&m!=0){
                            return d + 'd' + h + 'h' + m + 'm'
                        }
                    }
                    else {
                        return 'over a month'
                    }
                }
                else {
                    return ''
                }
            },
            formateDistance(distance) {
                let disc = Number(distance).toFixed(2)
                // 如果小数点后第二位为0则省略
                disc+=''
                //获取小数部分
                let num=disc.split('.')[1]
                if(num.split('')[1]==0) {
                    return disc.split('.')[0]+'.'+num.split('')[0]+'km'
                }
                else{
                    return disc + 'km'
                }
            }
        },
        mounted() {
            //先获取语言信息
            this.currentLang = window.localStorage.getItem('lang') || 'MM'
            if(this.currentLang=='US'){
                this.startStop=JSON.parse(localStorage.getItem('startStopInfo')).startStopNameEn
                this.endStop=JSON.parse(localStorage.getItem('endStopInfo')).endStopNameEn
            }
            else{
                this.startStop=JSON.parse(localStorage.getItem('startStopInfo')).startStopNameMm
                this.endStop=JSON.parse(localStorage.getItem('endStopInfo')).endStopNameMm
            }
            this.startId=JSON.parse(localStorage.getItem('startStopInfo')).startStopId
            this.endId=JSON.parse(localStorage.getItem('endStopInfo')).endStopId
            this.getResult()
        }
    }
</script>
<style scoped>
    .main {
        position: relative !important;
        font-family: Zawgyi-One, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }

    .fixed-section {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: white;
        z-index: 1000;
    }

    .fixed-section .head-bar {
        text-align: center;
        height: 46px;
        position: relative;
    }

    .fixed-section .head-bar .left-arrow {
        position: absolute;
        width: 28px;
        height: 28px;
        background: url(../../static/img/leftArrow.png);
        background-size: cover;
        left: 5px;
        top: 9px;
    }

    .fixed-section .head-bar span {
        font-size: 20px;
        font-weight: 500;
        line-height: 46px;
        color: black;
    }

    .head-bar .route-result {
        flex: 1;
        text-align: center;
    }

    .search-bar-area .start-stop, .end-stop {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 32px;
    }

    .search-bar-area .line {
        border-bottom: solid 1px #cecece;
    }

    .detail-data {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
    }

    .result-outer-wraper {
        margin: 125px 5px 5px 5px;
        position: relative;
    }

    .result-outer-wraper .mask {
        position: absolute;
        left: 0;
        right: 0;
        height: 150px;
        background: #FDF1D2;
        text-align: center;
    }

    .detail-data .numberBox {
        width: 60px;
        height: 60px;
        line-height: 60px;
        margin-left: 5px;
        text-align: center;
        color: white;
        font-size: 20px;
    }

    .detail-data .desc {
        flex: 1;
        margin-left: 5px;
    }

    .route-head {
        display: flex;
        margin: 5px;
        justify-content: space-between;
        border-radius: 3px;
        background-color: rgba(100, 100, 100, .1);
    }

    .route-head .stop-disc {
        color: #ff1d1db5;
    }

    .route-head .time {
        text-align: right;
        color: red;
        font-size: 16px;
        font-weight: 500;
    }

    .walk-logo {
        width: 60px;
        height: 60px;
        margin-left: 5px;
    }

    .result-wraper {
        border: solid 1px rgba(0, 0, 0, .05);
        border-radius: 5px;
        margin: 10px 0;
        -webkit-box-shadow: 0px 6px 30px -5px rgba(77, 66, 77, 1);
        -moz-box-shadow: 0px 6px 30px -5px rgba(77, 66, 77, 1);
        box-shadow: 0px 6px 30px -5px rgba(77, 66, 77, 1);
    }

    .search-area {
        display: flex;
        margin: 5px;
        border-radius: 5px;
        background: rgba(99, 99, 99, .1);
    }

    .search-area .search-bar-area {
        flex: 1;
    }

    .search-area .search-bar-area .start-stop {
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-area .search-bar-area .end-stop {
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-area .exchange-button {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .circle {
        display: flex;
        flex-direction: column;
        width: 10px;
        margin: 10px;
    }

    .outer-circle-green {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #1afa29;
    }

    .outer-circle-red {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d81e06;
    }

    .inner-circle {
        position: absolute;
        width: 4px;
        height: 4px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: white;
    }

    .circle .gray {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin: 1px 3px;
        background: #cdcdcd;
    }
</style>


